<template>
    <el-dialog
        v-model="dialogVisible"
        :title="title||'文件上传'"
        width="500px"
        @opened="handleDialogOpened"
        :before-close="handleClose"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
    >
    <el-upload
        ref="uploadRef"
        class="upload-demo"
        drag
        :data="uplaodData"
        :headers="{ token: store.state.permission.token }"
        v-model:file-list="fileList"
        :on-success="handleUploadSuccess"
		:before-upload="handleBeforeUpload" 
        :on-exceed="handleExceed"
        :on-error="handleUploadError"
        :on-remove="handleRemove"
        :action="action"
        :limit="limit"
        :accept="accept"
        :on-preview="handlePictureCardPreview"
        list-type="picture"
        name="files"
    >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
            将文件拖到此处，或 <em>点击上传</em>
        </div>
        <template #tip>
            <div class="el-upload__tip">
                请上传大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
                格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>的文件
                <slot></slot>
            </div>
        </template>
    </el-upload>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleConfirm">确 认</el-button>
            </span>
        </template>
    </el-dialog>
</template>
  
<script setup lang="ts">
import { ref, defineEmits, defineProps, watch, computed, reactive, onMounted, onUnmounted } from 'vue';
import type { FormInstance, FormRules } from 'element-plus'
import { addMap } from '@/api/map';
import * as util from  '@/utils';
import { host } from  '@/utils/request';
import { ElMessage } from 'element-plus';
import { useStore } from 'vuex';

const store = useStore();

const dialogVisible = ref(false);

interface Props {
	title?: string;
    visible: boolean;
    limit?: number;
    module?: string;
    fileSize?: number;
    fileType?: Array<string>;
}

const action = ref(host+'/robot/files');
const fileList = ref([]);
const props = withDefaults(defineProps<Props>(),{
    visible: false,
    limit: 1,
    module: 'images',
    fileType: ()=>["png", "jpg", "jpeg"],
    fileSize: 5
})
const uploadRef = ref(null);

const accept = computed(()=>{
    return props.fileType.map(item => ('.' + item)).toString()
})

const uplaodData = ref({
    module: props.module
})
watch(()=>props.visible,val=>{ 
    console.log(val,'dialogVisibledialogVisibledialogVisibledialogVisible')
    dialogVisible.value = val
 })

const emit = defineEmits<{
    'close': [value: any],
    'confirm': [value: any],
}>()

function handleClose(value?:string){
    emit('close',value);
}

function handleDialogOpened(){
    uploadRef.value.clearFiles();
    fileList.value = [];
    //console.log(fileList.value,'clearFilesclearFilesclearFilesclearFiles')
}

function handleConfirm(){
    if(fileList.value.length>0){
        emit('confirm',fileList.value.map((item:any)=>item.response.data[0]));
        handleClose();
    }else{
        ElMessage.warning('请上传文件！');
    }
}

function handleRemove(){

}

function handlePictureCardPreview(){

}

function handleUploadSuccess(response,file,uploadFiles){
    console.log(response,uploadFiles,"resofje---")
    fileList.value = uploadFiles;
}
function handleBeforeUpload(file){
    if (props.fileSize) {
        const isLt = file.size / 1024 / 1024 < props.fileSize;
        if (!isLt) {
            ElMessage.error(`上传图片大小不能超过 ${props.fileSize} MB!`);
            return false
        }
    }
    return true
}
function handleExceed(){
    ElMessage.error('只能上传'+props.limit+'个文件');
}
function handleUploadError(){
    ElMessage.error('上传失败！');
}

</script>

<style lang="scss" scoped>

</style>

